var url = "http://192.168.0.103:9999/?";
var chatName = "Remote";
var R = "0";
var G = "200";
var B = "0";

$(document).ready(function () {

    // Script button pressed
    $("#scriptButton").click(function () {
        getScript();
        $("#scriptDiv").toggle();
    })
    // Get script HTML code
    getScript();
    function getScript() {
        $.ajax({
            url: url + "getScriptHTML?",
            crossDomain: true,
            dataType: 'html',
            success: function (data) {
                $("#scriptDiv").html(data);
                $("#fullScreenScriptDiv").html(data);
            },
            error: function () {
                alert("Error");
            }
        });
    };

    // Run command on button press
    $(".button").click(function () {
        var command = $(this).attr("data-command");
        var options = $(this).attr("data-options");
        if (command == "runColor") {
        } else {
            options = options.replace("{0}", $("#sourceInput").val());
            executeCommand(command, options);
        }
    });
    // Run command on colorButton press
    $("#colorButton").colpick({
        layout: 'rgb',
        color: 'ff8800',
        onSubmit: function (hsb, hex, rgb, el) {
            var options = rgb["r"] + "," + rgb["g"] + "," + rgb["b"];
            $(el).colpickHide();
            executeCommand("runColor", options);
        }
    })

    // Check currentScriptID every 5 seconds
    executeCommand("returnCurrentScriptID", "");
    setInterval(function () {
        executeCommand("returnCurrentScriptID", "")
        // Get chat
        executeCommand("reloadChat", "")
    }, 5000);

    // Show script full screen
    $("#currentScriptIDContent").click(function () {
        $("#fullScreenScriptDiv").css("height", $(window).height() - 50);
        $("#fullScreenScriptDiv").css("width", $(window).width() - 20);
        $("#fullScreenScriptDiv").toggle();
    });
    $("#topNextButton").click(function () {
        executeCommand("scriptNext", "");
    });
    // Chat
    $("#topChatButton").click(function () {
        $("#chatDiv").toggle();
    });
    $("#chatInput").keypress(function (event) {

        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            var code = String.format("<p><span style='color: RGB({0},{1},{2})'>{3}:</span> {4}</p>", R, G, B, chatName, $("#chatInput").val());
            executeCommand("reloadChat", code);
            $("#chatInput").val("");
        }

    });
});
String.format = function () {
    // The string containing the format items (e.g. "{0}")
    // will and always has to be the first argument.
    var theString = arguments[0];

    // start with the second argument (i = 1)
    for (var i = 1; i < arguments.length; i++) {
        // "gm" = RegEx options for Global search (more than one instance)
        // and for Multiline search
        var regEx = new RegExp("\\{" + (i - 1) + "\\}", "gm");
        theString = theString.replace(regEx, arguments[i]);
    }

    return theString;
}
// Execute commands
function executeCommand(command, options) {
    $.ajax({
        url: url + command + "?" + options,
        crossDomain: true,
        dataType: 'html',
        success: function (data) {
            if (command == "returnCurrentScriptID") {
                $("#currentScriptIDContent").html(data);
            } else {
                if (command == "reloadChat") {
                    $("#chatBox").contents().find('html').html(data);
                } else {
                    $("#logTextArea").html(data);
                    executeCommand("returnCurrentScriptID", "");
                }
            }
        },
        error: function () {
            alert("Error");
        }
    });
};